<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加报表配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/formSelects/formSelects-v4.css"/>
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/formSelects/formSelects-v4.js"></script>
</head>

<body>
<div class="x-body">
    <form class="layui-form layui-form-pane" style="margin-left: 20px;">
        <div style="width:100%;height:400px;overflow: auto;">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">报表配置信息</legend>
                </fieldset>
            </div>
            <div class="layui-form-item">
                <label for="reportName" class="layui-form-label">
                    <span class="x-red">*</span>报表名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="reportName" name="reportName" lay-verify="reportName"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 110px;">报表类型</label>
                <div class="layui-input-block" style="width: 220px;">
                    <select id="reportType" name="reportType" lay-verify="required"  lay-filter="reportType">
                        <option value="">请选择...</option>
                        <option value="0">简单报表</option>
                        <option value="1">复杂报表</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 110px;">所属行为</label>
                <div class="layui-input-block" style="width: 220px;">
                    <select id="behaviorId" name="behaviorId" lay-verify="required"  lay-filter="behaviorId">
                        <option value="">请选择...</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="sqlDiv" style="display: none;">
                <label for="sql" class="layui-form-label">
                    sql
                </label>
                <textarea id="sql" style="width: 550px; height: 400px;" name="sql" placeholder="请输入sql" class="layui-textarea"></textarea>
            </div>
            <div class="layui-form-item" id="dimensionDiv" style="display: none;">
                <div class="layui-form">
                    <select id="0" name="0" xm-select="0">
                        <option value="">请选择维度</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="measureDiv" style="display: none;">
                <div class="layui-form">
                    <select id="1" name="1" xm-select="1">
                        <option value="">请选择量度</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" id="chartTypeDiv" style="display: none;">
                <label class="layui-form-label" style="width: 110px;">图表类型</label>
                <div class="layui-input-block" style="width: 220px;">
                    <select id="chartType" name="chartType">
                        <option value="table">表格</option>
                        <option value="line">折线图</option>
                        <option value="cloud">字符云</option>
                        <option value="bar">柱状图</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="dsl" class="layui-form-label">
                        <span class="x-red">*</span>dsl初始化
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="dsl" name="dsl" lay-verify="dsl" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="reportDesc" class="layui-form-label">
                        <span class="x-red">*</span>描述
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="reportDesc" name="reportDesc" lay-verify="reportDesc" autocomplete="off"
                               class="layui-input">
                    <#--<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>-->
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div style="width: 100%;height: 55px;background-color: white;border-top:1px solid #e6e6e6; position: fixed;bottom: 1px;margin-left:-20px;">
                    <div class="layui-form-item" style=" float: right;margin-right: 30px;margin-top: 8px">

                        <button class="layui-btn layui-btn-normal" lay-filter="add" lay-submit>
                            增加
                        </button>
                        <button class="layui-btn layui-btn-primary" id="close">
                            取消
                        </button>
                    </div>
                </div>
            </div>
            <div
    </form>
</div>

<script>
    var formSelects = layui.formSelects;
    formSelects.render();

    $ = layui.jquery;
    var form = layui.form
            , layer = layui.layer;
    form.render();
    //自定义验证规则
    form.verify({
        reportName: function (value) {
            if (value.trim() == "") {
                return "报表名称不能为空";
            }
        }
    });

    $('#close').click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    });
    //监听提交
    form.on('submit(add)', function (data) {
        var reportType = data.field.reportType;
        if(reportType == 0) {
            var cube = {};
            var dimentionId = [];
            var measureId = [];
            var dimention = formSelects.value('0', 'valStr');
            var splitDimention = dimention.split(",");
            for (id in splitDimention) {
                dimentionId.push(splitDimention[id]);
            }
            var measure = formSelects.value('1', 'valStr');
            var splitMeasure = measure.split(",");
            for (id in splitMeasure) {
                measureId.push(splitMeasure[id]);
            }
            cube.dimentionId = dimentionId;
            cube.measureId = measureId;

            var cubestr = JSON.stringify(cube);
            data.field.cube = cubestr;
        } else {
            data.field.cube = data.field.sql;
            data.field.chartType="table";
        }
        layerAjax('addReportConfig', data.field, 'reportConfigList');
        return false;
    });

    // 获取维度字典
    function dictionary(aggFlag, behaviorId){
        $("#"+aggFlag+"").empty();
        $.ajax({
            type: "POST",
            url: "${re.contextPath}/reportConfig/loadsBehaviorFieldByFlag",
            data: {'aggFlag':aggFlag,'behaviorId': behaviorId},  //传入组装的参数
            async: false,
            dataType: "json",
            success: function (result) {
                for(var index in result.data){
                    for(var key in result.data[index]){
                        $("#"+aggFlag+"").append(new Option(result.data[index][key], key));
                    }
                }
                formSelects.render();
            }
        });
    }

    function getBehaviorList(channelId) {
        $.ajax({
            url: "${re.contextPath}/behavior/selectBehaviorList",
            type: "GET",
            data: {
                channelId: channelId
            },
            success: function (result) {
                for (var i=0;i<result.data.length;i++){
                    var id = result.data[i].id;
                    var behaviorName = result.data[i].behaviorName;
                    $("#behaviorId").append(new Option(behaviorName, id));
                }
                form.render();
            }
        });
    }


    $(function () {

        form.on('select(behaviorId)', function(data){
            var behaviorId = data.value; //得到被选中的值
            dictionary(0, behaviorId);
            dictionary(1, behaviorId);
        });

        form.on('select(reportType)', function(data){
            var reportType = data.value; //得到被选中的值
            if(reportType == 0){
                $("#chartTypeDiv").show();
                $("#dimensionDiv").show();
                $("#measureDiv").show();
//                $("#dimensionDiv select").attr("lay-verify", "required");
//                $("#measureDiv select").attr("lay-verify", "required");
                $("#chartType").attr("lay-verify", "required");
                $("#sql").removeAttr("lay-verify");
                $("#sqlDiv").hide();
            } else {
                $("#chartTypeDiv").hide();
                $("#dimensionDiv").hide();
                $("#measureDiv").hide();
//                $("#dimensionDiv select").removeAttr("lay-verify");
//                $("#measureDiv select").removeAttr("lay-verify");
                $("#chartType").removeAttr("lay-verify");
                $("#sql").attr("lay-verify", "required");
                $("#sqlDiv").show();
            }
        });
        var channelId = parent.parent.document.getElementById('channelId').value;
        getBehaviorList(channelId);
    });
</script>
</body>

</html>
